<template>
  <div>
    <el-drawer size="45%" v-model="visible" :wrapperClosable="false">
      <template #title>
        <div class="drawer-header">
          <div class="flex items-center dot" v-if="showDot">
            <div class="w-[5px] h-[5px] rounded-1/2 bg-[#3721FF]"></div>
            <span class="ml-2 drawer-title">{{ props.title }}</span>
          </div>
          <div class="text-[12px] text-[#999999] mt-1">
            <p>
              推荐商品落地页展示规则。点击
              <span class="text-[#3721FF] cursor-pointer">查看示例</span>
            </p>
          </div>
        </div>
      </template>
      <div class="drawer-content">
        <slot></slot>
        <div>
          <div>
            <div class="bg-#FAFAFA pl-4 p-4 mb-4 rounded-4px">
              <h4>商品信息</h4>
              <div class="pr-4 mt-4">
                <el-descriptions :column="2" class="bg-#FAFAFA">
                  <el-descriptions-item label="商品标题：">
                    {{ recommendedData?.title }}
                  </el-descriptions-item>
                  <el-descriptions-item label="地区：">{{
                    recommendedData?.areaName
                  }}</el-descriptions-item>
                  <el-descriptions-item label="商品形态：">{{
                    recommendedData?.thaliFlag == 1 ? '套餐' : '单品'
                  }}</el-descriptions-item>
                  <el-descriptions-item label="模版："
                    >{{ recommendedData?.template }}
                  </el-descriptions-item>
                  <el-descriptions-item label="商品原价：">
                    {{ recommendedData?.originalPrice }}
                  </el-descriptions-item>
                  <el-descriptions-item label="折扣价：">{{
                    recommendedData?.discountedPrice
                  }}</el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
            <div class="flex items-center">
              <p>落地页显示位<span class="text-[#FF0000]">*</span></p>
              <div class="ml-[32px]">
                <el-radio-group v-model="displayPosition">
                  <el-radio value="1">商品底部落地页</el-radio>
                  <el-radio value="2">下单成功页底部</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div>
              <div class="el-btn">
                <el-button
                  type="primary"
                  color="#3721FF"
                  class="mt-[60px]"
                  @click="handleselectProducts"
                  >选择推荐商品</el-button
                >
              </div>
              <el-table
                :data="tableData"
                class="mt-4"
                :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#333' }"
              >
                <el-table-column prop="title" label="商品名称" width="180" />
                <el-table-column prop="cover" label="图片">
                  <template #default="{ row }">
                    <img
                      :src="row.cover"
                      :preview-src-list="[row.cover]"
                      fit="cover"
                      style="width: 50px; height: 50px"
                    />
                  </template>
                </el-table-column>
                <el-table-column prop="discountedPrice" label="价格">
                  <template #default="{ row }">
                    <div>
                      <p>原价：{{ row?.originalPrice ?? 0 }}</p>
                      <p>折扣价：{{ row?.discountedPrice ?? 0 }}</p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="140" fixed="right">
                  <template #default="{ row, $index }">
                    <!-- <el-button type="text" color="#3721FF" plain link size="small">更换</el-button> -->
                    <el-button
                      type="text"
                      color="#3721FF"
                      plain
                      link
                      size="small"
                      @click="deleteRow(row, $index)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="el-dia-btn">
          <el-button @click="hide">取消</el-button>
          <el-button type="primary" color="#3721FF" @click="confirm">确定</el-button>
        </div>
      </template>
    </el-drawer>
    <SelectProducts
      ref="selectProductsRef"
      :showDot="true"
      width="50%"
      title="选择推荐商品"
      @confirm="handleUpdateSelProductList"
    />
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'ProRecommendedDetails' })
const emit = defineEmits(['close', 'confirm'])
import SelectProducts from '@/components/SelectProducts/index.vue'
import { ProductApi } from '@/api/product/addProduct'
import { throttle } from '@/utils'
import { object } from 'vue-types'
const visible = ref(false)
const selectProductsRef = ref()
const displayPosition = ref('1')
const route = useRouter()
const productId = ref()
const tableData = ref([])
const props = defineProps({
  showDot: {
    type: Boolean,
    default: false
  },
  // isBatchImport: {
  //   type: Boolean,
  //   default: false
  // },
  title: {
    type: String,
    default: '批量导入'
  },
  // 宽度
  width: {
    type: String,
    default: '50%'
  }
})
const handleselectProducts = () => {
  console.log(66666)

  selectProductsRef.value?.show()
}
//
const deleteRow = (row, index) => {
  tableData.value.splice(index, 1)
}
const handleUpdateSelProductList = (val) => {
  if (tableData.value && tableData.value.length > 0) {
    tableData.value = Object.assign(tableData.value, val)
  } else {
    tableData.value = val
  }
}
const confirm = throttle(async () => {
  console.log('tableData.value', tableData.value)
  tableData.value.map((item) => {
    item.displayPosition = displayPosition.value
  })
  let parmas = {
    id: productId.value,
    productIdList: tableData.value.map((item) => item.id)
  }
  await ProductApi.createProductRecommend(parmas).then(() => {
    ElMessage({
      message: '推荐成功',
      type: 'success'
    })
  })

  emit('confirm')
  hide()
}, 1000)
const show = (row) => {
  visible.value = true
  console.log('999999999999999999999999', row)
  productId.value = row.id
  handlegetRecommendedProducts(row.id)
}
// 获取推荐商品
const recommendedData = ref()
const handlegetRecommendedProducts = async (id) => {
  const data = await ProductApi.getProductRecommend({ id: id })
  console.log('推荐商品', data)
  recommendedData.value = data
  displayPosition.value = data.displayPosition ?? '1'
  tableData.value = data.recommendRespList
}
const hide = () => {
  visible.value = false
  emit('close')
}
watch(
  () => props.isBatchImport,
  (val) => {
    visible.value = val
  }
)
defineExpose({
  show,
  hide
})
</script>

<style lang="scss" scoped>
:deep(.el-descriptions__body) {
  background-color: #fafafa;
  width: 80%;
}
</style>
<style scoped>
@import '@/styles/website.scss';
</style>
